<template>
    <div class="page pay">
        <nav-bar title="收款" @click-left="$router.back()" :shadow="false"></nav-bar>

        <div class="top flex_start">
            <div class="left flex_center">
                <van-icon name="shop" size="40" color="#1989fa" />
            </div>
            <div class="right">
                <div class="title">这是一个标题</div>
                <div class="label">这是描述</div>
            </div>
        </div>
        <div class="top_after"></div>

        <div class="show">
            <div class="show_con">
                <span>¥</span>
                <span class="amount">{{amount}}</span>
            </div>
        </div>

        <div class="keyboard">
            <van-row class="mb10">
                <van-col span="8" class="flex_center" @click="payAction(1)">
                    <div class="fun_cell">
                        <van-icon name="credit-pay" size="30" />
                        <div class="title">刷卡收款</div>
                    </div>
                </van-col>
                <van-col span="8" class="flex_center" @click="payAction(2)">
                    <div class="fun_cell">
                        <van-icon name="scan" size="30" />
                        <div class="title">扫码收款</div>
                    </div>
                </van-col>
                <van-col span="8" class="flex_center" @click="payAction(3)">
                    <div class="fun_cell">
                        <van-icon name="qr" size="30" />
                        <div class="title">二维码收款</div>
                    </div>
                </van-col>
            </van-row>

            <!-- <number-keyboard :show="show" extra-key="." :hide-on-click-outside="false"	 @blur="show = false"/> -->

            <van-row class="line">
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(7)" hairline>7</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(8)" hairline>8</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(9)" hairline>9</van-button>
                </van-col>
            </van-row>
            <van-row class="line">
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(4)" hairline>4</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(5)" hairline>5</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(6)" hairline>6</van-button>
                </van-col>
            </van-row>
            <van-row class="line">
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(1)" hairline>1</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(2)" hairline>2</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(3)" hairline>3</van-button>
                </van-col>
            </van-row>
            <van-row class="line">
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick(0)" hairline>0</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" @touchstart="keybordClick('.')" hairline>.</van-button>
                </van-col>
                <van-col span="8" class="flex_center">
                    <van-button class="butt" color="#666" @touchstart="keybordClick('-1')" hairline><i class="iconfont icon-delete" style="fontSize: 30px"></i></van-button>
                </van-col>
            </van-row>
        </div>

    </div>
</template>

<script>
import { mapState } from 'vuex';
import { NumberKeyboard } from 'vant';
import { Dialog } from 'vant';

export default {
    name: "Pay",
    components: { NumberKeyboard, Dialog },

    data() {
        return {
            amount: "",
            show: true,
        }
    },

    computed: {
        ...mapState({
            userRole: state => state.userRole,
            custInfo: state => state.homeData.custInfo,
            userInfo: state => state.userInfo,
        }),

        formateMoney() {
            let ret = (parseFloat(this.amount) * 100).toString();
            return `${"0".repeat(12 - ret.length)}${ret}`
        },
    },

    methods: {
        keybordClick(value) {
            if (value == '-1') {
                this.amount = this.amount.substr(0, this.amount.length - 1);
            } else {
                let newValue = `${this.amount}${value}`;
                // 校验金钱格式
                if (this.$check.start(newValue, "").isMoney(0, 100000000).end()) {
                    return;
                } else {
                    this.amount = newValue
                }
            }
        },

        // 
        payAction(type) {
            if (!this.amount) {
                this.$toast("输入金额");
                return;
            }
            // // TODO 
            // const userId = "U0004272000000008";
            // const merId = "QRC483100000000";
            // const tell = "18217595408";
            if (type == '1') { // 刷卡交易
                let params = {
                    userId: this.userInfo.userId, // this.userInfo.userId
                    merId: this.custInfo.merId, // this.custInfo.merId
                    txnAmt: this.formateMoney
                };
                this.$bridge.GetSDKData("qPbocConsume", params).then(resp => {
                    this.showRet(resp)
                });
            } else if (type == '2') { // 
                let params = {
                    userId: this.userInfo.userId, // this.userInfo.userId
                    merId: this.custInfo.merId, // this.custInfo.merId
                    total_fee: this.formateMoney,
                    body: "条码交易",
                };
                this.$bridge.GetSDKData("uatQRConsume", params).then(resp => {
                    this.showRet(resp)
                });
            } else if (type == '3') { // 条码被扫交易
                let params = {
                    userId: this.userInfo.userId, // this.userInfo.userId
                    merId: this.custInfo.merId, // this.custInfo.merId
                    total_fee: this.formateMoney,
                    body: "扫码交易",
                    limit_credit_pay: '0', // 是否支持信用卡
                    need_receipt: false, // 电子发票
                };
                this.$bridge.GetSDKData("uatQRGen", params).then(resp => {
                    this.showRet(resp)
                });
            }
        },

        showRet(resp) {
            Dialog.alert({
                title: '收款成功',
                message: resp,
            }).then(() => { });
            this.amount = "";
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/color.scss";

.pay {
    overflow: hidden;
    .top {
        background-color: $BG_COLOR;
        color: #fff;
        padding: 10px 20px;

        .left {
            width: 50px;
            height: 50px;
            background-color: #fff;
            border-radius: 50%;
        }

        .right {
            margin-left: 10px;
            .title {
                font-size: 16px;
            }
            .label {
                font-size: 12px;
            }
        }
    }

    .top_after {
        width: 120%;
        height: 70px;
        margin-left: -10%;
        border-radius: 0 0 50% 50%;
        background-color: $BG_COLOR;
    }

    .show {
        margin-top: -60px;
        width: 100%;
        position: absolute;
        z-index: 1;
        padding: 0 20px;
        .show_con {
            width: 100%;
            border-radius: 10px;
            padding: 20px;
            background-color: #fff;
            font-weight: bold;
            font-size: 20px;
            box-shadow: 0px 10px 10px #eee;

            .amount {
                font-size: 40px;
                color: #333;
            }
        }
    }

    .keyboard {
        width: 100%;
        position: fixed;
        bottom: 0;
        left: 0;

        .fun_cell {
            padding: 10px 0;
            width: 90%;
            border-radius: 10px;
            background-color: $BG_COLOR;
            color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-shadow: 4px 4px 6px #aaa;

            & > .title {
                font-size: 12px;
                margin-top: 6px;
            }
        }
        .mb10 {
            margin-bottom: 20px;
        }
        .line {
            margin: 0;
        }
        .butt {
            width: 100%;
            height: 60px;
            font-size: 30px;
            border-radius: 0;
        }
    }
}
</style>
